<template>
  <div class=" margin-tb">
    <el-form
      ref="infoForm"
      :model="invoicesPackingInfo"
      :rules="IPRules"
      label-position="left"
      label-width="110px"
      size="mini"
      class="text-sm"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <el-card>
            <div slot="header" class="clearfix">
              <span class="title-icon">发件人信息</span>
            </div>
            <div class="padding-40">
              <el-form-item prop="senderCompany">
                <div slot="label">发件人公司名：</div>
                <el-input
                  v-model="invoicesPackingInfo.senderCompany"
                ></el-input>
              </el-form-item>
              <el-form-item prop="senderLinkMan">
                <div slot="label">联系人：</div>
                <el-input
                  v-model="invoicesPackingInfo.senderLinkMan"
                ></el-input>
              </el-form-item>
              <el-form-item prop="senderPhone">
                <div slot="label">电话：</div>
                <el-input v-model="invoicesPackingInfo.senderPhone"></el-input>
              </el-form-item>
              <el-form-item prop="senderAdress">
                <div slot="label">详细地址：</div>
                <el-input v-model="invoicesPackingInfo.senderAdress"></el-input>
              </el-form-item>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div slot="header" class="clearfix">
              <span class="title-icon">进口商信息</span>
            </div>
            <div class="padding-40">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="importerCompanyName">
                    <div slot="label">进口商公司名：</div>
                    <el-input
                      v-model="invoicesPackingInfo.importerCompanyName"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="importerLinkMan">
                    <div slot="label">进口商联系人：</div>
                    <el-input
                      v-model="invoicesPackingInfo.importerLinkMan"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="importerPhone">
                    <div slot="label">进口商电话：</div>
                    <el-input
                      v-model="invoicesPackingInfo.importerPhone"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="importerZipCode">
                    <div slot="label">进口商邮编：</div>
                    <el-input
                      v-model="invoicesPackingInfo.importerZipCode"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="vat">
                    <div slot="label">VAT：</div>
                    <el-input v-model="invoicesPackingInfo.vat"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="eori">
                    <div slot="label">EORI：</div>
                    <el-input v-model="invoicesPackingInfo.eori"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item prop="importerAddress">
                <div slot="label">进口商地址：</div>
                <el-input
                  v-model="invoicesPackingInfo.importerAddress"
                ></el-input>
              </el-form-item>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
    <el-card class="margin-top">
      <div slot="header" class="clearfix">
        <span class="title-icon">发票信息</span>
      </div>
      <div class="padding">
        <TableModule
          :table-columns="tableColumns"
          :table-data="invoicesPackingInfo.liquidationInvoices"
        />
      </div>
    </el-card>

    <el-card class="margin-top">
      <div slot="header" class="clearfix">
        <span class="title-icon">箱单信息</span>
      </div>

      <div class="padding">
        <TableModule :table-columns="tableColumns1" :table-data="packingData" />
      </div>
    </el-card>
  </div>
</template>

<script>
import TableModule from '@/components/TableModule'
export default {
  props: {
    invoicesPackingInfo: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  components: {
    TableModule
  },
  data() {
    return {
      IPRules: {
        senderCompany: [
          { required: true, message: '请填写发件人公司', trigger: 'blur' }
        ],
        senderLinkMan: [
          { required: true, message: '请填写联系人', trigger: 'blur' }
        ],
        senderPhone: [
          { required: true, message: '请填写电话', trigger: 'blur' }
        ],
        senderAdress: [
          { required: true, message: '请填写详细地址', trigger: 'blur' }
        ],
        importerCompanyName: [
          { required: true, message: '请填写进口商公司名', trigger: 'blur' }
        ],
        importerLinkMan: [
          { required: true, message: '请填写进口商联系人', trigger: 'blur' }
        ],
        importerPhone: [
          { required: true, message: '请填写进口商电话', trigger: 'blur' }
        ],
        importerZipCode: [
          { required: true, message: '请填写进口商邮编', trigger: 'blur' }
        ],
        vat: [{ required: true, message: '请填写VAT', trigger: 'blur' }],
        eori: [{ required: true, message: '请填写EORI', trigger: 'blur' }],
        importerAddress: [
          { required: true, message: '请填写进口商地址', trigger: 'blur' }
        ]
      },
      tableColumns: [
        { prop: 'declareNameEn', label: '英文品名' },
        { prop: 'declareNameCn', label: '中文品名' },
        { prop: 'brand', label: '品牌' },
        { prop: 'material', label: '材质' },
        { prop: 'purpose', label: '用途' },
        { prop: 'customsCode', label: '海关编码' },
        { prop: 'num', label: '个数' },
        { prop: 'declareValue', label: '申报单价' },
        { prop: 'imgUrl', label: '图片', type: 'img' }
      ],
      tableColumns1: [
        { prop: 'startNumNo', label: '箱号' },
        { prop: 'weight', label: '单箱毛重(kg)' },
        { prop: 'length', label: '长(cm)' },
        { prop: 'width', label: '宽(cm)' },
        { prop: 'height', label: '高(cm)' },
        { prop: 'declareNameCn', label: '中文品名' },
        { prop: 'num', label: '个数' }
      ],
      packingData: []
    }
  },
  mounted() {
    if (this.invoicesPackingInfo.packingLists) {
      const arr = []
      for (const i of this.invoicesPackingInfo.packingLists) {
        for (const j of i.packSkuList) {
          arr.push({
            startNumNo: i.startNumNo,
            weight: i.weight,
            length: i.length,
            width: i.width,
            height: i.height,
            declareNameCn: j.declareNameCn,
            num: j.num
          })
        }
      }

      this.packingData = arr
    }
  }
}
</script>

<style></style>
